<template>
  <div class="table-form">
    <el-form ref="formRef" :model="form" :inline="true" class="pro-select-box">
      <el-form-item label="标签规范:" prop="Code">
        <el-input v-model="form.Code" clearable placeholder="标签规范" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <!-- <el-button type="primary" @click="output">导出</el-button> -->
        <el-button type="success" @click="add" v-permission="['labels:add']"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <hcTable
      :table-data="list"
      :options="options"
      :columns="tableColumn"
      @size-change="handlerPageSize"
      @current-change="handlerPageIndex"
      @command="handleAction"
    >
      <template #labelImage="{ row }">
        <el-image
          style="width: 100px; height: 60px"
          :src="getAssetsFile(row.labelImage)"
          :z-index="99"
        />
      </template>
    </hcTable>
    <addAndEdit :options="editOption" @closeDialog="closeDialog" />
    <detailInfo :infoOptions="infoOpt" @closeDraw="closeDraw" />
  </div>
</template>

<script setup>
import { reactive, computed, ref, onMounted } from "vue";
import { getlabelsList, deletelabelsListByName } from "@/api/labels";
import addAndEdit from "./dialog/addAndEdit.vue";
import detailInfo from "./dialog/detailInfo.vue";
import { getAssetsFile } from "@/utils";

let form = reactive({
  Code: "",
});
let editOption = reactive({
  show: false,
  type: "add",
  data: {},
});
let infoOpt = reactive({
  show: false,
  data: [],
});
let tableColumn = [
  { type: "index", width: "60", label: "序号", align: "center", fixed: true },
  { prop: "labelSpecCode", label: "标签规范", align: "center" },
  { prop: "labelTemplates", label: "标签模板", align: "center" },
  { prop: "version", label: "版本", align: "center" },
  { prop: "creationTime", label: "创建时间", align: "center" },
  {
    width: "200",
    label: "操作",
    align: "center",
    buttons: [
      {
        name: "详情",
        type: "success",
        command: "detail",
      },
      // {
      //   name: "编辑",
      //   type: "warning",
      //   command: "edit",
      // },
      {
        name: "删除",
        type: "danger",
        command: "delete",
        permission: ["labels:delete"],
      },
    ],
  },
];

let list = ref([]);
let loading = ref(false);
let total = ref(0);
let page = reactive({
  pageSize: 10,
  pageIndex: 1,
});

const params = computed(() => {
  return {
    ...form,
    ...page,
  };
});
const options = computed(() => {
  return {
    loading: loading.value,
    showPagination: true,
    rowKey: "id",
    defaultExpandAll: false,
    border: true,
    paginationConfig: {
      total: total.value,
      currentPage: page.pageIndex,
      pageSize: page.pageSize,
    },
  };
});

onMounted(async () => {
  query();
});

function query() {
  page.pageIndex = 1;
  getTable();
}

async function getTable() {
  loading.value = true;
  list.value = [];
  let res = await getlabelsList(params.value);
  res?.items.forEach((item) => {
    let labelTemplates = item.labelTemplates.split("|");
    let labelImgPaths = item.labelImgPaths.split("|");

    labelTemplates.forEach((temp, index) => {
      if (temp) {
        list.value.push({
          ...item,
          labelTemplates: temp,
          labelImgPaths: labelImgPaths?.[index] ?? "",
        });
      }
    });
  });

  total.value = res.totalCount || 0;
  loading.value = false;
}

// 表请求条数改变
const handlerPageSize = (pageSize) => {
  page.pageSize = pageSize;
  page.pageIndex = 1;
  getTable();
};
// 表格页数改变
const handlerPageIndex = (pageIndex) => {
  page.pageIndex = pageIndex;
  getTable();
};

const handleAction = (command, row) => {
  switch (command) {
    case "edit":
      handlerEdit(row);
      break;
    case "delete":
      handlerDel(row);
      break;
    case "detail":
      handlerDetail(row);
      break;
    default:
      break;
  }
};

function handlerDetail(row) {
  infoOpt.show = true;
  infoOpt.data = row;
}

function handlerEdit(row) {
  editOption.show = true;
  editOption.type = "edit";
  editOption.data = row;
}

function handlerDel(row) {
  ElMessageBox.confirm(`是否确认删除该标签物料?`, "提示", {
    confirmButtonText: "确 定",
    cancelButtonText: "取 消",
    type: "warning",
  })
    .then(async () => {
      let res = await deletelabelsListByName(row.labelSpecCode, [
        row.labelTemplates,
      ]);
      if (res) {
        ElMessage.success("删除成功");
        getTable();
      }
    })
    .catch(() => {
      return false;
    });
}

function closeDialog(val) {
  editOption.show = false;
  val && getTable();
}

function closeDraw() {
  infoOpt.show = false;
}

function add() {
  editOption.show = true;
  editOption.type = "add";
  editOption.data = [];
}
</script>

<style lang="scss" scoped></style>
